﻿using System;

namespace RexToy.UI.Controls
{
    public class Page : Container
    {
        public string[] events = new string[] { "onclose" };

        private TransitionMode _transition;
        private bool _useTrans;
        private string inClass, outClass;
        private bool __show;

        public Page(TransitionMode? transition)
        {
            this.__dragEventBubble = false;
            this._useTrans = (transition != null);
            this._transition = transition ?? TransitionMode.Slide;

            if (this._useTrans)
            {
                this.outClass = StringExt.Format("{0} out reverse", this._transition);
                this.inClass = StringExt.Format("{0} in", this._transition);
            }

            this.__domNode = RexToy.UI.Controls.DomNode.Create(new DomNodeCreateOptions()
            {
                tag = Tag.Div,
                className = "ui-page ui-body-c",
                items = new DomNodeCreateOptions[]{
                new DomNodeCreateOptions()
                {
                    tag= Tag.Div,
                    hashName= "head"
                },
                new DomNodeCreateOptions()
                {
                    tag= Tag.Div,
                    hashName= "container"
                },
                new DomNodeCreateOptions()
                {
                    tag= Tag.Div,
                    hashName= "foot"
                }
            }
            });
            this.__domNode["data-role"] = "page";
            if (RexToy.UI.Capability.CssTransitions) //Note:fix error in IE8-
                //this.__domNode._element.AddEventListener("webkitAnimationEnd", this.__webkit_animEnd.bind(this));
                this.__domNode.AttachEvent("webkitAnimationEnd", new Action(this.__webkit_animEnd).Bind(this));

            RexToy.UI.Global.Window.AttachEvent(DomEvent.OnResize, new Action(this._resize).Bind(this));
        }

        private void _resize()
        {
            var size = this._calcSize();
            this.Render(size);
        }

        private FixedHeaderBar _header;
        private FixedFooterBar _footer;
        public void SetFixedCompensate(FixedHeaderBar header, FixedFooterBar footer)
        {
            this._header = header;
            this._footer = footer;
        }

        public void Show()
        {
            this.__show = true;

            if (this._useTrans)
            {
                this.__domNode.ReplaceClass(this.outClass, this.inClass);
            }

            this.__domNode.AppendClass("ui-page-active");
            this.__domNode.GetStyle().Display = System.Html.DOM.CSS.Display.Block;
            this.__domNode.GetStyle().ZIndex = 5;

            var size = this._calcSize();
            this.Render(size);
        }

        private Size _calcSize()
        {
            //Note:adjust for header/footer, adjust compensate div.
            var height = RexToy.UI.Global.Window.GetSize().Height;
            var fStyle = this.__domNode.SearchByName("foot").GetStyle();

            if (this._footer != null)
            {
                var fHeight = this._footer.GetSize().Height;
                height -= fHeight;
                fStyle.Height = fHeight + "px";
            }
            else
            {
                fStyle.Height = "0px";
            }
            var hStyle = this.__domNode.SearchByName("head").GetStyle();
            if (this._header != null)
            {
                var hHeight = this._header.GetSize().Height;
                height -= hHeight;
                hStyle.Height = hHeight + "px";
            }
            else
            {
                hStyle.Height = "0px";
            }

            this.__domNode.SearchByName("container").Height = height;
            return RexToy.UI.Global.Window.GetSize();
        }

        public override void Render(Size size)
        {
            var dom = this.__domNode.SearchByName("container");

            var h = dom.Height;
            Control resizeCtrl = null;
            var s = new RexToy.UI.Size(dom.Width, dom.Height);
            for (var i = 0; i < this.__controls.Length; i++)
            {
                var ctrl = this.__controls[i];

                if (ctrl is RexToy.UI.Controls.FixedHeaderBar || ctrl is RexToy.UI.Controls.FixedFooterBar)
                    continue;

                var ctn = ctrl as Container;
                if (ctrl.IsContainer && ctn.SizeUpdate)
                {
                    if (resizeCtrl != null)
                    {
                        throw new Exception("container can have only 1 resizable control!");
                    }
                    else
                    {
                        resizeCtrl = ctrl;
                    }
                }
                else
                {
                    if (ctrl.IsContainer)
                        ctrl.Render(ctrl.GetSize());
                    h -= ctrl.GetSize().Height;
                }
            }
            if (resizeCtrl != null)
            {
                resizeCtrl.DomNode.Height = h;
                resizeCtrl.Render(new RexToy.UI.Size(dom.Width, h));
            }
        }

        private void __webkit_animEnd()
        {
            if (!this.__show)
            {
                this.__domNode.GetStyle().Display = System.Html.DOM.CSS.Display.None;
                this.__domNode.RemoveClass("ui-page-active");
                this.__domNode.GetStyle().ZIndex = 0;
            }
        }

        public void close()
        {
            this.__show = false;

            if (this._useTrans)
            {
                this.__domNode.ReplaceClass(this.inClass, this.outClass);
            }

            if (!RexToy.UI.Capability.CssTransitions || !this._useTrans)
            {
                this.__domNode.GetStyle().Display = System.Html.DOM.CSS.Display.None;
                this.__domNode.RemoveClass("ui-page-active");
                this.__domNode.GetStyle().ZIndex = 0;
            }

            this.__FireEvent("onclose");
        }
    }
}
